import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:mobile_vpn/common/ext/asset_ext.dart';
import 'package:slider_captcha/slider_captcha.dart';

import 'forgot_password_logic.dart'; // 添加滑块验证码包

class ForgotPasswordPage extends StatelessWidget {
  ForgotPasswordPage({Key? key}) : super(key: key);

  final ForgotPasswordLogic logic = Get.put(ForgotPasswordLogic());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.white,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios, color: Colors.black),
          onPressed: () => Get.back(),
        ),
        title: Text(
          '找回密码',
          style: TextStyle(
            color: Colors.black,
            fontSize: 36.sp,
            fontWeight: FontWeight.bold,
          ),
        ),
        centerTitle: true,
      ),
      body: Stack(
        children: [
          SingleChildScrollView(
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 32.w),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(height: 40.h),
                  _buildPhoneInput(),
                  SizedBox(height: 24.h),
                  _buildCodeInput(),
                  SizedBox(height: 24.h),
                  _buildPasswordInput(),
                  SizedBox(height: 24.h),
                  _buildConfirmPasswordInput(),
                  SizedBox(height: 60.h),
                  _buildSubmitButton(),
                ],
              ),
            ),
          ),
          // 添加滑块验证码弹层
          Obx(() => logic.showCaptcha.value
              ? _buildCaptchaOverlay(context)
              : SizedBox.shrink()),
        ],
      ),
    );
  }

  // 添加滑块验证码弹层
  Widget _buildCaptchaOverlay(BuildContext context) {
    return GestureDetector(
      onTap: () => logic.showCaptcha.value = false,
      child: Container(
        color: Colors.black54,
        child: Center(
          child: GestureDetector(
            onTap: () {}, // 阻止事件冒泡
            child: Container(
              width: MediaQuery.of(context).size.width * 0.8,
              padding: EdgeInsets.all(20.w),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12.r),
              ),
              child: Obx(() => Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    '安全验证',
                    style: TextStyle(
                      fontSize: 32.sp,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  SizedBox(height: 10.h),
                  Text(
                    '拖动滑块完成拼图验证',
                    style: TextStyle(
                      fontSize: 32.sp,
                      color: Colors.grey,
                    ),
                  ),
                  SizedBox(height: 20.h),
                  if (logic.isCaptchaLoading.value)
                    CircularProgressIndicator()
                  else
                    SliderCaptcha(
                      image: Image.asset('toutiao'.jpeg,),
                      colorBar: Color(0xFF009FE8),
                      colorCaptChar: Color(0xFF009FE8),
                      title: '向右滑动完成验证',
                      onConfirm: (bool success) {
                        if (success) {
                          logic.verifyCaptcha();
                        } else {
                          Get.snackbar(
                              '验证失败',
                              '请重试滑动拼图',
                              snackPosition: SnackPosition.BOTTOM,
                              backgroundColor: Colors.red,
                              colorText: Colors.white
                          );
                        }
                        return Future.value(success);
                      },
                    ),
                  SizedBox(height: 20.h),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      TextButton(
                        onPressed: () => logic.showCaptcha.value = false,
                        child: Text(
                          '取消',
                          style: TextStyle(color: Colors.grey),
                        ),
                      ),
                      SizedBox(width: 10.w),
                      TextButton(
                        onPressed: logic.refreshCaptcha,
                        child: Text(
                          '刷新',
                          style: TextStyle(color: Color(0xFF009FE8)),
                        ),
                      ),
                    ],
                  ),
                ],
              )),
            ),
          ),
        ),
      ),
    );
  }

  // 修改验证码输入部分的获取按钮
  Widget _buildCodeInput() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              '验证码',
              style: TextStyle(
                fontSize: 28.sp,
                color: Colors.black54,
              ),
            ),
            Obx(() => TextButton(
              onPressed: logic.isRunning.value ? null : () {
                logic.sendVerificationCode();
              },
              child: logic.isRunning.value
                  ? Text('${logic.countdown.value}秒后重试',
                  style: TextStyle(color: Colors.grey, fontSize: 24.sp))
                  : Text('获取验证码',
                  style: TextStyle(color: Colors.blue, fontSize: 24.sp)),
            )),
          ],
        ),
        SizedBox(height: 8.h),
        Obx(() => TextField(
          controller: logic.codeController,
          keyboardType: TextInputType.number,
          decoration: InputDecoration(
            hintText: '请输入验证码',
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12.r),
              borderSide: BorderSide.none,
            ),
            filled: true,
            fillColor: Colors.grey[100],
            errorText: logic.codeErrorText.value.isNotEmpty
                ? logic.codeErrorText.value
                : null,
            errorStyle: TextStyle(color: Colors.red, fontSize: 24.sp),
          ),
        )),
      ],
    );
  }


  Widget _buildPhoneInput() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '手机号',
          style: TextStyle(
            fontSize: 28.sp,
            color: Colors.black54,
          ),
        ),
        SizedBox(height: 8.h),
        Obx(() => TextField(
          controller: logic.phoneController,
          keyboardType: TextInputType.phone,
          inputFormatters: [
            FilteringTextInputFormatter.digitsOnly,
            LengthLimitingTextInputFormatter(11),
          ],
          decoration: InputDecoration(
            hintText: '请输入注册手机号',
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12.r),
              borderSide: BorderSide.none,
            ),
            filled: true,
            fillColor: Colors.grey[100],
            errorText: logic.phoneErrorText.value.isNotEmpty
                ? logic.phoneErrorText.value
                : null,
            errorStyle: TextStyle(color: Colors.red, fontSize: 24.sp),
          ),
        )),
      ],
    );
  }
  Widget _buildPasswordInput() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '新密码',
          style: TextStyle(
            fontSize: 28.sp,
            color: Colors.black54,
          ),
        ),
        SizedBox(height: 8.h),
        Obx(() => TextField(
          controller: logic.passwordController,
          obscureText: !logic.showPassword.value,
          decoration: InputDecoration(
            hintText: '请输入6位以上新密码',
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12.r),
              borderSide: BorderSide.none,
            ),
            filled: true,
            fillColor: Colors.grey[100],
            suffixIcon: IconButton(
              icon: Icon(
                logic.showPassword.value
                    ? Icons.visibility
                    : Icons.visibility_off,
                color: Colors.grey,
              ),
              onPressed: () => logic.showPassword.toggle(),
            ),
            errorText: logic.passwordErrorText.value.isNotEmpty
                ? logic.passwordErrorText.value
                : null,
            errorStyle: TextStyle(color: Colors.red, fontSize: 24.sp),
          ),
        )),
      ],
    );
  }

  Widget _buildConfirmPasswordInput() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '确认密码',
          style: TextStyle(
            fontSize: 28.sp,
            color: Colors.black54,
          ),
        ),
        SizedBox(height: 8.h),
        Obx(() => TextField(
          controller: logic.confirmPasswordController,
          obscureText: !logic.showConfirmPassword.value,
          decoration: InputDecoration(
            hintText: '请再次输入新密码',
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12.r),
              borderSide: BorderSide.none,
            ),
            filled: true,
            fillColor: Colors.grey[100],
            suffixIcon: IconButton(
              icon: Icon(
                logic.showConfirmPassword.value
                    ? Icons.visibility
                    : Icons.visibility_off,
                color: Colors.grey,
              ),
              onPressed: () => logic.showConfirmPassword.toggle(),
            ),
            errorText: logic.confirmPasswordErrorText.value.isNotEmpty
                ? logic.confirmPasswordErrorText.value
                : null,
            errorStyle: TextStyle(color: Colors.red, fontSize: 24.sp),
          ),
        )),
      ],
    );
  }

  Widget _buildSubmitButton() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 50.w),
      child: ElevatedButton(
        onPressed: () => logic.submit(),
        style: ElevatedButton.styleFrom(
          backgroundColor: Color(0xFF009FE8),
          minimumSize: Size(double.infinity, 80.h),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(45.r),
          ),
          elevation: 3,
        ),
        child: Text(
          '确认修改',
          style: TextStyle(
            fontSize: 34.sp,
            fontWeight: FontWeight.w600,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}